<template>
  <div class="list-container">
    <div :class="calcClass" class="list-title"
      v-if="is_title"
    >{{title}}</div>
    <div class="list-body">
      <slot></slot>
    </div>
    
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: "热搜"
      },
      titleSize:{
        type: String,
        default: "normal",
        validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
          return ['normal', 'small', 'big'].indexOf(value) !== -1
        }
      },
      is_title:{
        default:true,
        type:Boolean
      }
    },
    computed: {
      calcClass() {
        return [this.titleSize]
      },

    },
  }
</script>

<style scoped>
  .list-container{
    padding: .05rem .05rem;
    background: white;
  }
  .list-body{
    display: flex;
    flex-wrap:wrap;
  }
  .normal{
    font-size: .15rem;
  }
  .big{
    font-size: .20rem;
  }
  .small{
    font-size: .12rem;
  }
  .list-title{
    font-weight: 430;
    margin: .1rem 0;
  }
</style>